<style>
    .layui-form .layui-form-item .layui-inline .layui-form-label {
        width: 200px;
        font-size: 18px;
        font-weight: bold;
    }
    .layui-form .layui-form-item .layui-inline .layui-input-inline {
        width: 300px;
        font-size: 16px;
    }
</style>
<form class="layui-form  seller-form" id="userAdd" style="padding:20px;height: auto;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            <a href="{:url('index')}" style="color: #428bca;font-weight:bold;" >Fund Manage</a> / Edit
        </legend>
    </fieldset>
    <br/>
    <br/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Fund Name Cn <font color="red">* </font>：</label>
            <div class="layui-input-inline">
                <input type="text" name="fund_name_cn" class="layui-input" lay-verify="required_en"
                       lay-verType="tips" value="{$data.fund_name_cn ?? ''}" placeholder="Please enter the Fund Name Cn">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Fund Name En <font color="red">* </font>：</label>
            <div class="layui-input-inline">
                <input type="text" name="fund_name_en"
                       lay-verify="required_en"  placeholder="Please enter the Fund Name En"
                       lay-verType="tips"  value="{$data.fund_name_en ?? ''}" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Account Name <font color="red">* </font>：</label>
            <div class="layui-input-inline">
                <input type="text" name="account_name"
                       lay-verify="required_en"  placeholder="Please enter the Account Name"
                       lay-verType="tips" value="{$data.account_name ?? ''}" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Account Number：</label>
            <div class="layui-input-inline">
                <input type="text" name="account_number" value="{$data.account_number ?? ''}" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Bank Name：</label>
            <div class="layui-input-inline">
                <input type="text" name="bank_name" value="{$data.bank_name ?? ''}" class="layui-input" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Bank Address：</label>
            <div class="layui-input-inline">
                <input type="text" name="bank_address" value="{$data.bank_address ?? ''}" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Swift Code：</label>
            <div class="layui-input-inline">
                <input type="text" name="swift_code" value="{$data.swift_code ?? ''}" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Routing Number：</label>
            <div class="layui-input-inline">
                <input type="text" name="routing_number" value="{$data.routing_number ?? ''}" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Fund Img <font color="red">* </font>：</label>
            <div class="layui-input-inline">
                <input type="text" name="fund_img" id="fund_img" readonly
                       lay-verify="required_en" value="{$data.fund_img ?? ''}"
                       lay-verType="tips" placeholder="Please upload pictures first."
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Email Address：</label>
            <div class="layui-input-inline">
                <input type="text" name="email_address" value="{$data.email_address ?? ''}" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">&nbsp;</label>
            <div class="layui-input-inline">
                <div class="layui-upload" >
                    <button type="button" class="layui-btn layui-btn-primary" id="addBtn">
                        <i class="icon icon-upload3"></i>Click Upload
                    </button>
                    <div class="layui-upload-list" id="photo-list" >
                        <img class="layui-upload-img" id="addPic" src="{$data.fund_img ?? ''}"
                             style="max-width: 120px;max-height: 150px;cursor: pointer">
                        <p id="notice"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="padding-top: 50px;">
        <div class="layui-input-block">
            <input type="hidden" name="id" value="{$data.id}">
            <button type="button" class="layui-btn" lay-submit lay-filter="save">confirm</button>
            <a href="{:url('index')}" class="layui-btn layui-btn-primary">{:lang('back')}</a>
        </div>
    </div>
</form>

<script>
    layui.use(['form' , 'upload'], function () {
        var form = layui.form,
            upload  = layui.upload;
        form.on('submit(save)', function(data){
            JsPost("{:url('balance/sourceEdit')}", data.field, function(res){
                if (res.code > 0) {
                    layer.msg(res.msg, {time: 1500, icon: 1}, function () {
                        window.location.href = "{:url('index')}";
                    });
                } else {
                    layer.msg(res.msg, {time: 1500, icon: 2});
                }
            });
        });

        //普通图片上传
        var uploadInt = upload.render({
            elem: '#addBtn',                //绑定元素
            url: '{:url("uploads/Uploads")}',       //上传接口
            //*********************传输限制
            size: 300,                   //传输大小100k
            exts: 'jpg|png|gif|',        //可传输文件的后缀
//            , accept: 'file'              //video audio images
            //****************传输操作相关设置
//            , data: { Parm1: "hello", Parm2: "world" }    //额外传输的参数
//            , auto: false                                 //自动上传,默认是打开的
//            , bindAction: '#btnUpload'                    //auto为false时，点击触发上传
            multiple: false,                            //多文件上传
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#addPic').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res) {                      //传输完成的回调
                if(res.code>0){
                    layer.msg(res.msg,{icon: 1, time: 1500});
                    $('#fund_img').val(res.url);
                }else{
                    //如果上传失败
                    layer.msg('Upload Error',{icon: 2, time: 1500});
                }
            },
            error: function () {                         //传输失败的回调
                //演示失败状态，并实现重传
                var notice = $('#notice');
                notice.html('<br /><span style="color: #FF5722;">Upload Error</span> <a class="layui-btn demo-reload">Retry</a>');
                notice.find('.demo-reload').on('click', function(){
                    uploadInt.upload();
                });
            }
        });

        $('#photo-list img').on('click', function () {
            const addpic = $('#addPic').attr('src');
            if(addpic == undefined){
                layer.msg('Please upload pictures first.',{icon: 2, time: 1500});
                return false;
            }
            layer.photos({
                photos: '#photo-list',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        })
    });
</script>
